<div
    class="modulemenu t3js-modulemenu"
    role="menubar"
    data-role="modulemenu"
    id="modulemenu"
>
    <f:render section="Navigation" arguments="{modules: modules, currentLevel: 1}" />
</div>
<f:section name="Navigation">
    <f:if condition="{modules} && {currentLevel} <= 2">
        <ul
            class="modulemenu-group-container"
            {f:if(condition: '{parent}', then: 'aria-visible="{f:if(condition: parent.collapsed, then: \'false\', else: \'true\')}"')}
            {f:if(condition: '{parent}', then: '{f:if(condition: parent.collapsed, then: \'style="display: none"\')}')}
        >
            <f:for each="{modules}" as="module">
                <li
                    data-level="{currentLevel}"
                    {f:if(condition: '{module.children} && {currentLevel} == 1', then: 'class="modulemenu-group modulemenu-group-{f:if(condition: module.collapsed, then: \'collapsed\', else: \'expanded\')}"')}
                >
                    <button
                        title="{module.description}"
                        class="modulemenu-action t3js-modulemenu-action"
                        role="menuitem"
                        id="{module.name}"
                        data-modulename="{module.name}"
                        {f:if(condition: module.link, then: 'data-link="{module.link}"')}
                        {f:if(condition: module.navigationComponentId, then: 'data-navigationcomponentid="{module.navigationComponentId}"')}
                        {f:if(condition: module.navigationFrameScript, then: 'data-navigationframescript="{module.navigationFrameScript}"')}
                        {f:if(condition: module.navigationFrameScriptParameters, then: 'data-navigationframescriptparameters="{module.navigationFrameScriptParameters}"')}
                        {f:if(condition: '{module.children} && {currentLevel} == 1', then: 'aria-haspopup="true" aria-expanded="{f:if(condition: module.collapsed, then: \'false\', else: \'true\')}"')}
                    >
                        <span class="modulemenu-icon" aria-hidden="true"><f:format.raw>{module.icon}</f:format.raw></span>
                        <span class="modulemenu-name">{module.title}</span>
                        <span class="modulemenu-indicator" aria-hidden="true"></span>
                    </button>
                    <f:render section="Navigation" arguments="{modules: module.children, parent: module, currentLevel: '{currentLevel + 1}'}" />
                </li>
            </f:for>
        </ul>
    </f:if>
</f:section>
